<template lang="pug">
.user_admin
    .game_find_detail(v-show="defaultGamePage")
        label(@dblclick=" defaultGamePage=false ")  Search Game By Name
            input(v-on:keyup.enter="SearchGames" v-model="gameNameKey" type="text" )
        .add_new_game
            GameDetailChange(appid="")
            span You Can Add New Game



        ul.gameDetailChange_list
            li(v-for="(item,index) in ResultGames" :key="index" )
                GameDetailChange(:appid="String(item.steam_appid)")
    .findUser(v-show="!defaultGamePage" )
        label(@dblclick="defaultGamePage=true") Find Other Users
        input(v-model="userDisplayKey" v-on:keyup.enter="UserInfoByDisplay" placeholder="input user`s display")
        table
            tr
                td Email
                td display
                td create_time
                td is admin
                td state
                td Add SomeOne
            tr(v-for="(item,index) in searchResult" :key="index" v-show="IsNotSelf(item.email)")
                td {{item.email}}
                td {{item.display}}
                td {{item.create_time}}
                td(:style="{color: item.is_admin?'#1cef17':'#fc4c4c'}" @click="item.is_admin=!item.is_admin") {{item.is_admin}}
                td(:style="{color: item.disabled?'#fc4c4c':'#1cef17'}" @click="item.disabled=!item.disabled") {{item.disabled?'Disable':'Enable' }}
                td
                    span(v-show="item.email!=='root'" @click="UpdateUserState(item.user_id,item.is_admin,item.disabled)") Update UserState

</template>
<script setup lang="ts">

import {computed, defineAsyncComponent, ref, watchEffect} from "vue";
import {useRouter} from "vue-router";
import type {Category, GameObj, Genre} from "../../utils/types/Game";
import {StoreGameInfoSearch} from "../../store";
import type {UserInfo} from "../../utils/types/UserInfo";
import {StoreUserInfo} from "../../store/userInfo";
import {AdminUpdateUserState, AdminUserInfoByDisplay} from "../../reqApi/AdminApi";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import {LogSuccess} from "../../utils/notification/Index";
import {GameInfoByName} from "../../reqApi/Game";

const GameDetailChange = defineAsyncComponent(() =>
    import('../utils/game/GameDetailChange.vue')
)

const ResultGames = ref<GameObj[]>([])
const defaultGamePage = ref(false);
const search = StoreGameInfoSearch();
const router = useRouter()
const gameNameKey = ref("")
const userDisplayKey = ref("")
const DataStoreUserInfo = StoreUserInfo().Get()
const searchResult = ref<UserInfo[]>([])
const IsNotSelf = (email: string) => {
    return email !== DataStoreUserInfo.value?.email
}

const UserInfoByDisplay = () => {
    AdminUserInfoByDisplay({
        display: userDisplayKey.value
    }).then(resp => {
        const result = resp.data as ResultInfo<UserInfo[]>
        LogSuccess(result.msg)
        if (result.success) {
            searchResult.value = result.data || []
        }
    })
}
const UpdateUserState = (userId: number, admin: boolean, state: boolean) => {
    AdminUpdateUserState({
        user_id: userId,
        disabled: state,
        is_admin: admin,
    }).then(resp => {
        const result = resp.data as ResultInfo<any>
        LogSuccess(result.msg)
        UserInfoByDisplay()
    })
}


const SearchGames = () => {
    ResultGames.value = []
    GameInfoByName({name: gameNameKey.value}).then(resp => {
        const result = resp.data as ResultInfo<GameObj[]>
        if (result.success) {
            ResultGames.value = result.data || []
        }
    })
}


const GameTags = ref([
    {id: "1", description: "Action"},
    {id: "2", description: "Strategy"},
    {id: "3", description: "RPG"},
    {id: "4", description: "Casual"},
    {id: "9", description: "Racing"},
    {id: "18", description: "Sports"},
    {id: "23", description: "Indie"},
    {id: "25", description: "Adventure"},
    {id: "28", description: "Simulation"},
    {id: "29", description: "Massively Multiplayer"},
    {id: "37", description: "Free to Play"},
    {id: "51", description: "Animation Modeling"},
    {id: "52", description: "Audio Production"},
    {id: "53", description: "Design Illustration"},
    {id: "54", description: "Education"},
    {id: "55", description: "Photo Editing"},
    {id: "56", description: "Software Training"},
    {id: "57", description: "Utilities"},
    {id: "58", description: "Video Production"},
    {id: "59", description: "Web Publishing"},
    {id: "60", description: "Game Development"},
    {id: "70", description: "Early Access"}
])
const GameTypes = ref([
    {id: 1, description: "Multi-player"},
    {id: 2, description: "Single-player"},
    {id: 8, description: "Valve Anti-Cheat enabled"},
    {id: 9, description: "Co-op"},
    {id: 13, description: "Captions available"},
    {id: 15, description: "Stats"},
    {id: 16, description: "Includes Source SDK"},
    {id: 17, description: "Includes level editor"},
    {id: 18, description: "Partial Controller Support"},
    {id: 20, description: "MMO"},
    {id: 22, description: "Steam Achievements"},
    {id: 23, description: "Steam Cloud"},
    {id: 24, description: "Shared/Split Screen"},
    {id: 25, description: "Steam Leaderboards"},
    {id: 27, description: "Cross-Platform Multiplayer"},
    {id: 28, description: "Full controller support"},
    {id: 29, description: "Steam Trading Cards"},
    {id: 30, description: "Steam Workshop"},
    {id: 31, description: "VR Support"},
    {id: 32, description: "Steam Turn Notifications"},
    {id: 35, description: "In-App Purchases"},
    {id: 36, description: "Online PvP"},
    {id: 37, description: "Shared/Split Screen PvP"},
    {id: 38, description: "Online Co-op"},
    {id: 39, description: "Shared/Split Screen Co-op"},
    {id: 40, description: "SteamVR Collectibles"},
    {id: 41, description: "Remote Play on Phone"},
    {id: 42, description: "Remote Play on Tablet"},
    {id: 43, description: "Remote Play on TV"},
    {id: 44, description: "Remote Play Together"},
    {id: 47, description: "LAN PvP"},
    {id: 48, description: "LAN Co-op"},
    {id: 49, description: "PvP"},
    {id: 51, description: "Steam Workshop"},
    {id: 52, description: "Tracked Controller Support"},
    {id: 53, description: "VR Supported"}
])


const checkedTagList = ref<string[]>([])
const checkedTypeList = ref<number[]>([])


const checkedTags = computed(() => {
    let genres: Genre[] = []
    for (let i = 0; i < checkedTagList.value.length; i++) {

        GameTags.value.map((v, k) => {
            if (v.id == checkedTagList.value[i]) {
                genres.push(v)
            }
        })
    }
    return genres
})
const checkedTypes = computed(() => {
    let genres: Category[] = []
    for (let i = 0; i < checkedTypeList.value.length; i++) {
        GameTypes.value.map((v, k) => {
            if (v.id == checkedTypeList.value[i]) {
                genres.push(v)
            }
        })
    }
    return genres
})
//  ----------------
watchEffect(() => {
    ResultGames.value = []

    UserInfoByDisplay()
})


</script>
<style lang="sass" scoped>

@import "../../assets/sass/user/admin"

</style>
